<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<html>
<head>
<style>
        #box{
            height:150px;
            width:150px;
            border:solid 1px #ccc;
            background:#eef;
            text-align:center;
        }
        #box img{
                width:135px;
                height:120px;
                margin:4px 4px 0px 4px;
        }
         
        #box .bnt{
                height:20px;
                line-height:20px;
        }
         
        ._box{ position: absolute;z-index:9 }
        #car{
            height:50px;
            width:50px;
            background:#ecc;
            border:solid 1px #ccc;
            position: absolute;
            left:500px;
            top:300px;
        }
    
</style>
</head>
 <body>
  
<div id="box">  
    <img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>   
    <a href="#">物品1</a>
    <a class="bnt"  href="javascript:;">加入</a>
</div>
<div id="box">  
    <img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>   
    <a href="#">物品2</a>
    <a class="bnt"  href="javascript:;">加入</a>
</div><div id="box">  
    <img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>   
    <a href="#">物品3</a> 
    <a class="bnt"  href="javascript:;">加入</a>
</div>
    
<div id="car"></div>    
     

<script src="lib/jquery-1.8.3.min.js"></script> 
<script>
    $(function(){
        var tmp ;
        $('#box .bnt').live('click',function(){
            if(tmp) tmp.remove(); 
            var box=$(this).parent();
            var $img=box.find("img");
            $tmp=$img.clone();
            var p=$img.offset();
            var p2=$(car).offset();
            // console.log(p);
            // console.log(p2);
            $tmp.addClass('_box').css(p).appendTo(box);
            p2=$.extend(p2,{height:5,width:5,opacity:10});
            $tmp.animate(p2, "slow",function(){
                $tmp.remove();  
            });
        });
    });
</script> 
</body>
</html>